<template>
  <div class="hot-list">
    <div class="top">
      <a class="main" url="/shop/productList/searchProdcut/searchProdcut">
        <div class="left">
          <div class="icon"></div>
          <div hover-class="none" class="search-link">请输入商品名称</div>
        </div>
      </a>
    </div>
    <productList :list="list" />
    <uni-load-more
      :status="status"
      :icon-size="12"
      :content-text="contentText"
      v-if="total > 3"
    />
  </div>
</template>
<script>
import productList from "./_list/list.vue";
import uniLoadMore from "@dcloudio/uni-ui/lib/uni-load-more/uni-load-more.vue";
export default {
  components: {
    productList,
    uniLoadMore
  },
  data() {
    return {
      list: [],
      currentPage: 0,
      total: 10,
      pageSize: 15,
      status: "more",
      bannerId: 0,
      contentText: {
        contentdown: "上拉加载更多",
        contentrefresh: "加载中...",
        contentnomore: "没有更多了"
      }
    };
  },
  onLoad(options) {
    uni.setNavigationBarTitle({
      title: options.bannerName
    });
    this.bannerId = options.bannerId
    this.productList();
  },
  onReachBottom() {
    this.productList();
  },
  methods: {
    productList() {
      if (this.currentPage >= Math.ceil(this.total / this.pageSize)) {
        this.status = "noMore";
        return;
      }
      this.status = "loading";
      this.$api
        .productList({ pageSize: this.pageSize, page: this.currentPage + 1 , bannerId: this.bannerId})
        .then(res => {
          if (res.code == 200) {
            this.total = res.data.total;
            this.currentPage++;
            this.list = this.list.concat(res.data.data);
          }
        });
    }
  }
};
</script>
<style lang="scss">
.hot-list {
  .top {
    height: 82rpx;
    .search-link {
      font-size: 26rpx;
      color: #666;
    }
    .main {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 82rpx;
      box-sizing: border-box;
      background: #fff;
      //   border-bottom: 1px solid #e7e7e7;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 25rpx;
      z-index: 999;
      .left {
        flex: 1;
        display: flex;
        align-items: center;
        margin-right: 25rpx;
        background: #f4f4f4;
        border-radius: 30rpx;
        height: 62rpx;
        .icon {
          flex: 0 0 27rpx;
          height: 27rpx;
          background: url(https://media.wxcwy.com/mini/images/searchiconS1@2x.png) no-repeat center
            center;
          background-size: 100% 100%;
          margin: 0 10rpx 0 15rpx;
        }
        .input {
          flex: 1;
        }
      }
      .right {
        color: #333333;
        font-size: 26rpx;
      }
    }
  }
}
</style>
